<template>
    <div class="l-from-body" >
        <el-form :model="formData" size="mini"  ref="form" label-width="88px"  >
            <el-col :span="24" style="padding-left:34px;">
                <draggable
                    :list="conditions"
                    :group="{ name: 'dic' }"
                    ghost-class="set-item-ghost"
                    handle=".l-drag-item">
                    <div v-for="(item, index) in conditions"
                        class="l-set-item l-set-item__Num" 
                        :key="index">
                        <i class="l-drag-item el-icon-rank"></i>
                        <el-tag type="info" size="medium" effect="plain">{{index + 1}}</el-tag>
                        <l-select
                            style="width:26%;margin-right:1%;"
                            size="mini"
                            v-model="item.prop"
                            :options="columns"
                            :clearable="false"
                            placeholder="字段"
                            
                            @change="handleChangeField"
                            ></l-select>
                        <l-select style="width:19%;margin-right:1%;"
                            size="mini"
                            :clearable="false"
                            v-model="item.symbol"
                            :placeholder="$t('比较符')"
                            :options="symbolOptions"
                            >
                        </l-select>
                        <l-select style="width:26%;margin-right:1%;"
                            size="mini"
                            :clearable="false"
                            v-model="item.valueType"
                            :placeholder="$t('字段值类型')"
                            :options="vTypeOptions"

                            @change="handleChangeVType(item)"
                            >
                        </l-select>
                        <el-input
                            :readonly="item.valueType != 1 && item.valueType != 10 "
                            style="width:26%;"
                            size="mini"
                            v-model="item.filedValue"
                            :placeholder="$t('字段值')"></el-input>
                        <el-button 
                            @click="handleRemoveConditions(index)"
                            circle
                            plain
                            type="danger"
                            size="mini"
                            icon="el-icon-minus"
                            class="l-delete-item"
                            style="padding: 4px;"></el-button>
                    </div>
                </draggable>
                <div style="padding-left:22px;" >
                    <el-button size="mini" type="text" icon="el-icon-circle-plus-outline" @click="handleAddConditions"  >{{ $t('添加过滤条件') }}</el-button>
                </div>
            </el-col>  
            <el-col :span="24">
                <el-form-item :label="$t('公式')" prop="formula">
                    <el-input v-model="formData.formula" :placeholder="$t('please enter公式,默认为 1 and 2 and 3 这种且方式')">
                        <el-popover
                            slot="append"
                            placement="bottom"
                            width="240"
                            trigger="hover">

                            <div class="info-message">
                                <p>{{ $t('请按如下规则Edit条件组合') }}</p>
                                <p class="ok">(1 and 2) or (3 and 4) <i class="fa fa-check"></i></p>
                                <p>{{ $t('1.有and和or必须加括号') }}</p>
                                <p class="error">1 and 2 or 3 and 4 <i class="fa fa-close"></i></p>
                                <p>{{ $t('2.一个括号里不能同时出现and和or') }}</p>
                                <p class="error">(1 and 2 or 3 )and 4 <i class="fa fa-close"></i></p>
                                <p>{{ $t('3.不允许出现不存在的编号') }}</p>
                                <p class="error">1 and 2 and 3 and 4 and 5 <i class="fa fa-close"></i></p>
                                <p>{{ $t('4.括号都是成对出现的') }}</p>
                                <p class="error">(1 and 2 and 3 and 4 <i class="fa fa-close"></i></p>
                            </div>    
                            <el-button  slot="reference" icon="el-icon-question"></el-button>
                        </el-popover>
                    </el-input>
                </el-form-item>
            </el-col>
        </el-form>
    </div>
</template>
<script>
import { mapGetters } from "vuex";
const api = window.$api.custmerForm.module

export default {
    data(){
        return {
            code:'',
            formData:{
                formula: ''
            },
            symbolOptions:[
                { value: 1, label: '等于' }, 
                { value: 2, label: '大于' }, 
                { value: 3, label: '大于等于' }, 
                { value: 4, label: '小于' },
                { value: 5, label: '小于等于' },
                { value: 6, label: '包含' }, 
                { value: 7, label: '包含于' }, 
                { value: 8, label: '不等于' },
                { value: 9, label: '不包含' },
                { value: 10, label: '不包含于' }],
            vTypeOptions:[
                { value: 1, label: '文本(String)' }, 
                { value: 10, label: '文本(Int)' }, 
                { value: 2, label: 'Login者ID' }, 
                { value: 3, label: 'Login者账号' },
                { value: 4, label: 'Login者公司' }, 
                { value: 41, label: 'Login者公司及下属公司' }, 
                { value: 5, label: 'Login者部门' }, 
                { value: 51, label: 'Login者部门及下属部门' },
                { value: 6, label: 'Login者岗位' }, 
                { value: 7, label: 'Login者角色' }
            ],
            conditions:[],
        }
    },
    asyncComputed:{
      columns:{
        async get(){
            if(this.code){
                const module = this.modules.find(t=>t.f_ModuleId == this.code)
                const res = await this.$awaitWraper(api.getScheme(module.f_UrlAddress))
                const formScheme = JSON.parse(res.formScheme.f_Scheme)
                let columns = []
                formScheme.formInfo.tabList.forEach(tab=>{
                    columns.push(...tab.components.filter(t=>!['gridtable','divider','password'].includes(t.type)))
                })
                columns = columns.map(t=>{ return {...t,value:`${t.field}${formScheme.db.findIndex(t2=>t2.name == t.table)}`} })
                const rdb = formScheme.rdb || []
                rdb.forEach(item=>{
                    columns.push({
                        type:'glbd',
                        value:item.id,
                        label:item.fname,

                        table:item.name,
                        cfield:item.cfield,
                        field:item.field,
                        relationField:`${item.relationField}${formScheme.db.findIndex(t=>t.name == item.relationName)}`

                    })
                })


                return columns
            }
            else{
                return []
            }
        }
      }
    },
    computed:{
        ...mapGetters(["modules"])
    },
    methods:{
        resetForm(){
            this.conditions = []
            this.$refs.form && this.$refs.form.resetFields()
        },
        // 校验表单
        async validateForm(){
            let valid = await this.$formValidateWraper(this.$refs.form)
            for(let i = 0,len = this.conditions.length;i<len;i++){
                const item =  this.conditions[i]
                if(this.$validatenull(item.prop)){
                    this.$message({
                        type: 'error',
                        message: this.$t('请填写过滤条件字段!')
                    })
                    valid = false
                    break
                }
                if(this.$validatenull(item.symbol)){
                    this.$message({
                        type: 'error',
                        message: this.$t('please select过滤条件比较符!')
                    })
                    valid = false
                    break
                }
                if(this.$validatenull(item.valueType)){
                    this.$message({
                        type: 'error',
                        message: this.$t('please select过滤条件字段值类型!')
                    })
                    valid = false
                    break
                }
                if(this.$validatenull(item.filedValue)){
                    this.$message({
                        type: 'error',
                        message: this.$t('请填写过滤条件字段值!')
                    })
                    valid = false
                    break
                }
            }

            return valid
        },
        setForm(code,data){
            this.code = code
            if(data){
                this.formData.name = data.name
                this.formData.formula = data.formula
                this.conditions = this.$deepClone(data.conditions)
            }
        },
        getForm(){
            const data = this.$deepClone(this.formData)
            data.conditions = this.$deepClone(this.conditions)
            return data
        },
        handleAddConditions(){
            this.conditions.push({prop:'',symbol:1,valueType:1,filedValue:''});
        },
        handleRemoveConditions(index){
            this.conditions.splice(index,1);
        },
        handleChangeVType(item){
            if(item.valueType == 1 || item.valueType == 10){
                item.filedValue = '';
            }
            else{
                item.filedValue = this.vTypeOptions.find(t=>t.value == item.valueType ).label;
            }
        },

        handleModuleChange(){
            this.conditions = []
        },

        handleChangeField(item){
            if(item){
                const condition = this.conditions.find(t=>t.prop == item.value)
                if(item.type == 'glbd'){
                    condition.type = 'glbd'
                    condition.table = item.table
                    condition.cfield = item.cfield
                    condition.field = item.field
                    condition.relationField = item.relationField
                }
                else{
                    condition.type = ''
                    condition.table = ''
                    condition.cfield = ''
                    condition.field = ''
                    condition.relationField = ''
                }
            }
        }
    }
}
</script>